//教练团
<template>
	<view class="coach">
		<view class="nav">
			<view class="sort">
				<picker mode="selector" :range="sortType" @change="setSort" :value="sortIndex">
					<view class="display">{{sortType[sortIndex]}}</view>
				</picker>
			</view>
			<view class="school">
				<picker mode="selector" :range="schoolName" @change="setSchool" :value="schoolIndex">
					<view class="display">{{schoolName[schoolIndex]}}</view>
				</picker>
			</view>
		</view>

		<view class="coachList">
			<view class="lists" v-for="(k,i) in result" :key="k.id">
				<image :src="k.pic" mode="aspectFill" class="coachPic"></image>
				<view class="coachName">{{k.name}}</view>
				<view class="school">{{k.school}}</view>
				<view class="score">
					<uni-rate :value="k.score" :readonly="true"></uni-rate>
				</view>
				<view class="scoreNum">{{k.score}}</view>
				<view class="labels">
					<view class="son" :class="labelStyle[index]" v-for="(item,index) in k.label">
						{{item}}
					</view>
				</view>
			</view>
			<view class="noCoach" v-if="(result.length==0)?true:false">
				<image src="@/static/images/background/operate/coach/noCoach.webp" mode="aspectFill"></image>
				<text>暂无教练</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sortIndex: 0,
				schoolIndex: 0,
				cityPosition: '梅州', //首页传过来的地址
				//进入页面后向后端发送请求根据地址返回地区的驾校信息
				schoolName: ['所有驾校', '驾校1', '驾校2', '驾校3', '驾校4', '驾校5', '驾校6', '驾校7', '驾校8', '驾校9'],
				sortType: ['综合排序', '合格率排序', '评分排序', '排序3'],
				labelStyle: ['first', 'second', 'third'], //标签样式
				coachMsg: [{
					name: '卢教练', //姓名
					pic: '../../../../static/user/coach/coachPic.jpg', //头像
					school: '驾校1', //所属驾校
					label: ['不抽烟', '不烫头','不开挂'], //标签
					score: 3.5, //评分
					id:1
				}, {
					name: '赵教练', //姓名
					pic: '../../../../static/user/coach/coachPic.jpg', //头像
					school: '驾校3', //所属驾校
					label: ['脾气好', '不抽烟'], //标签
					score: 4.2, //评分
					id:2
				}, {
					name: '钱教练', //姓名
					pic: '../../../../static/user/coach/coachPic.jpg', //头像
					school: '驾校2', //所属驾校
					label: ['脾气好', '不抽烟', '不烫头'], //标签
					score: 4.9, //评分
					id:3
				}],
				result: [],
			}
		},
		methods: {
			queryData(){
				if(this.schoolIndex==0){
					this.result = this.coachMsg
				}else{
					this.result = this.coachMsg.filter((item)=>{
						return item.school==this.schoolName[this.schoolIndex]
					})
				}
			},
			isAct() {
				this.isSelected = !this.isSelected;
				// this.isShow=!this.isShow;
			},
			setSort(e) {
				console.log('选择排序规则')
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.sortIndex = e.detail.value
			},
			setSchool(e) {
				console.log('选择驾校')
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.schoolIndex = e.detail.value
				console.log(this.schoolIndex)
				this.queryData();
			}
		},
		onShow() {
			this.result = this.coachMsg
		},
		watch: {
			// schoolIndex: {
			// 	immediate: true,
			// 	handler(newV, oldV) {
			// 		if (newV == 0) {
			// 			this.result = this.coachMsg
			// 		} else {
			// 			let temFilter = this.schoolName[newV]
			// 			this.result = this.coachMsg.filter((item) => {
			// 				for (var key in item) {
			// 					if (key.school === temFilter)
			// 						return item
			// 				}
			// 			})
			// 		}

			// 	}
			// }
		}
	}
</script>

<style>
	page {
		background-color: #F2F3F5;
	}

	/* 顶部导航start */
	.nav {
		display: flex;
		width: 750rpx;
		height: 80rpx;
		background-color: #fff;
	}

	.nav .sort,
	.nav .school {
		width: 50%;
		height: 100%;
	}

	.nav .sort {
		/* background-color: pink; */
	}

	.nav .school {
		/* background-color: skyblue; */
	}

	.display {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		color: #29C563;
	}

	/* 顶部导航end */


	/* 教练列表start */
	.coachList {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.noCoach {
		position: relative;
	}

	/* 暂无教练start */
	.noCoach image {
		position: absolute;
		top: 217rpx;
		left: 212rpx;
		width: 326rpx;
		height: 167rpx;
	}

	.noCoach text {
		position: absolute;
		top: 414rpx;
		left: 319rpx;
		width: 112rpx;
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
		line-height: 40rpx;
	}

	/* 暂无教练end */

	.coachList .lists {
		position: relative;
		margin: 1rpx 0;
		width: 750rpx;
		height: 180rpx;
		background: #ffffff;
	}

	.lists .coachPic {
		position: absolute;
		top: 30rpx;
		left: 34rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		/* background-color: skyblue; */
	}

	.lists .coachName {
		position: absolute;
		top: 30rpx;
		left: 168rpx;
		width: 84rpx;
		height: 28rpx;
		/* 溢出部分省略号 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		color: #333333;
		/* background-color: #29C563; */
		line-height: 28rpx;
	}

	.lists .school {
		position: absolute;
		top: 70rpx;
		left: 168rpx;
		height: 24rpx;
		/* 溢出部分省略号 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 24rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #666666;
		/* background-color: orange; */
		line-height: 24rpx;
	}

	.lists .score {
		position: absolute;
		left: 274rpx;
		top: 34rpx;
	}

	.lists .scoreNum {
		position: absolute;
		top: 50rpx;
		right: 180rpx;
		width: 28rpx;
		height: 20rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #666666;
		line-height: 20rpx;
	}

	.lists .labels {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		position: absolute;

		bottom: 30rpx;
		left: 168rpx;
		height: 36rpx;
		border-radius: 2px;
	}

	/* 标签样式 */
	.lists .labels .son {
		margin: 0 16rpx;
		width: 97rpx;
		height: 36rpx;
		border-radius: 2rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		line-height: 36rpx;
	}

	.lists .labels .first {
		color: #f17516;
		background: #ffecd9;
	}

	.lists .labels .second {
		color: #29c563;
		background: #dff9dc;
	}

	.lists .labels .third {
		color: #4988f5;
		background: #c5daff;
	}

	/* 教练列表end */
</style>
